<template>
    <!-- 商品分类 -->
    <div class="categoryContainer">

        <!-- 搜索区域 -->
        <div class="searchContainer">
            <!-- 输入关键字 -->
            <el-input v-model="keyWord" placeholder="输入关键字" clearable style="width: 15%;margin-right: 30px;"/>

            <!-- 查询键 -->
            <el-button type="primary">查询</el-button>

            <!-- 添加商品按钮 -->
            <el-button type="info" @click="dialogVisible = true">添加</el-button>
        </div>
        
        <!-- 表格区域 -->
        <div class="tableContainer">
            <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              max-height="780px"
              border
              @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column property="name" label="分类名称" min-width="90" align="center"/>
                <el-table-column property="num" label="分类编号" min-width="90" sortable align="center"/>
                <el-table-column property="status" label="状态" min-width="90" align="center"/>
                <el-table-column label="操作" min-width="120" align="center">
                    <template #default>
                        <el-link type="primary" @click="dialogVisible = true">编辑</el-link>
                        <el-link type="primary">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <Pagination 
            :bulkOperationOptions="[
                    {
                        value: '开启',
                        label: '开启',
                    },
                    {
                        value: '关闭',
                        label: '关闭',
                    },
                    {
                        value: '删除',
                        label: '删除',
                    }
                ]"/>

        <!-- 编辑添加弹框区域 -->
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
            <el-form
                :label-position="labelPosition"
                label-width="100px"
                :model="formLabelAlign"
                style="max-width: 460px"
            >
                <el-form-item label="分类名称">
                    <el-input v-model="formLabelAlign.name" />
                </el-form-item>
                <el-form-item label="分类编码">
                    <el-input type="number" v-model="formLabelAlign.num" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-radio-group v-model="formLabelAlign.radio1" class="ml-4">
                        <el-radio label="开启" size="large">开启</el-radio>
                        <el-radio label="不开启" size="large">不开启</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit(formLabelAlign)">保存</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import Pagination from '../../components/Shop/Pagination.vue'
import type { FormInstance } from 'element-plus'

export default defineComponent({
    name: 'GoodsCategory',

    //注册分页组件
    components: {
        Pagination
    },

    setup() {

        const labelPosition = ref('right')

        const formLabelAlign = reactive({
            name: '',
            num: '',
            radio1: '开启'
        })

        const dialogVisible = ref(false)

        interface category {
            name: string
            num: number
            status: string
        }

        const multipleSelection = ref<category[]>([])
    
        const handleSelectionChange = (val: category[]) => {
            multipleSelection.value = val
            console.log(multipleSelection)
        }

        const tableData: category[] = [
            {
                name: '哑铃',
                num: 56413,
                status: '开启'
            },
            {
                name: '哑铃',
                num: 78978,
                status: '关闭'
            },
            {
                name: '哑铃',
                num: 89745,
                status: '开启'
            },
            {
                name: '哑铃',
                num: 23745,
                status: '开启'
            },
            {
                name: '哑铃',
                num: 45876,
                status: '关闭'
            },
            {
                name: '哑铃',
                num: 12456,
                status: '关闭'
            }
        ]

        const keyWord = ref('')

        const submit = (formLabelAlign: FormInstance | undefined) => {
            console.log(formLabelAlign)
        }

        return {
            // 查询关键字
            keyWord,
            // 表格数据
            tableData,
            // 批量选择触发事件
            handleSelectionChange,
            // 显示弹框
            dialogVisible,
            labelPosition,
            formLabelAlign,
            submit
        }
    }
})
</script>

<style>
    .el-link {
        margin-right: 8px;
    }

    .categoryContainer {
        width: 98%;
        height: 100%;
        padding: 30px 0;
        margin: 10px auto;
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
            rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
            rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }

    .searchContainer {
        width: 98%;
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
        padding: 10px 0;
    }

    .tableContainer {
        width: 98%;
        margin: 0 auto;
        outline: 1px solid #eee;
    }

    .commonClass {
        width: 98%;
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
    }
</style>
